<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useTheme } from '@/composables/useTheme'
import { useAuth } from '@/composables/useAuth'
import { Vue3Lottie } from 'vue3-lottie'
import LoadingAnimationData from '@/assets/lotties/Wait I am Loading.json'
import AppHeader from './AppHeader.vue'
import AppFooter from './AppFooter.vue'

// 初始化主题系统
const { initTheme, getThemeClasses } = useTheme()

// 用户认证
const { initAuth } = useAuth()

/**
 * 键盘事件处理
 */
const handleKeydown = (event: KeyboardEvent): void => {
  if (event.key === 'Escape') {
    // 关闭搜索框的逻辑在AppHeader中处理
  }
}

onMounted(() => {
  initTheme()
  initAuth()
  // 添加全局键盘事件监听
  document.addEventListener('keydown', handleKeydown)
})

// 清理事件监听器
onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>

<template>
  <div id="app" :class="getThemeClasses()">
    <!-- Header -->
    <AppHeader />

    <!-- Main Content -->
    <main class="pt-16 min-h-screen">
      <router-view v-slot="{ Component, route }">
        <transition :name="(route.meta.transition as string) || 'page'" mode="out-in" appear>
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </main>

    <!-- Footer -->
    <AppFooter />

    <!-- 全局右下角装饰动画 -->
    <div class="fixed bottom-6 right-6 z-30 pointer-events-none">
      <Vue3Lottie
        :animationData="LoadingAnimationData"
        :height="120"
        :width="120"
        :speed="0.8"
        :loop="true"
        :autoplay="true"
        class="opacity-60 hover:opacity-100 transition-opacity duration-300"
      />
    </div>
  </div>
</template>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
}

/* 页面过渡动画 */
.page-enter-active,
.page-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--b2));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--bc) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--bc) / 0.5);
}

/* 无障碍访问 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .btn {
    border-width: 2px;
  }

  .card {
    border-width: 2px;
  }
}

/* 打印样式 */
@media print {
  .navbar,
  .footer {
    display: none !important;
  }

  main {
    padding-top: 0 !important;
  }
}
</style>

